<template>
    <a-modal width="70%" title="用户选择" :visible="visible" @cancel="handleCancel" @ok="$emit('show')">
        <a-card style="margin-bottom: 8px;height: 65px;margin-top: -10px;">
            <a-form style="margin-top: -10px;" layout="inline" :inline="false" :model="formData"
                :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" size="small" labelAlign="left">
                <a-form-item label="账户">
                    <a-input v-model="formData.name"></a-input>
                </a-form-item>
                <a-form-item label="昵称">
                    <a-input v-model="formData.name"></a-input>
                </a-form-item>
                <a-form-item>
                    <a-button type="primary">
                        查询
                    </a-button>
                </a-form-item>
                <a-form-item>
                    <a-button type="primary">
                        重置
                    </a-button>
                </a-form-item>
            </a-form>
        </a-card>
        <a-table rowKey="account" :columns="columns" :data-source="dataSource" bordered
            :rowSelection="{ selectedRowKeys: selectedRowKeysArray, onChange: onSelectChange, type: 'radio' }">
        </a-table>
    </a-modal>
</template>

<script>
export default {
    props: {
        loading: {
            type: Boolean,
            required: true
        }
    },
    watch: {
        loading() {
            this.visible = this.loading;
        }
    },
    data() {
        return {
            visible: false,
            formData: {
                name: ''
            },
            columns: [
                {
                    title: "账户",
                    dataIndex: "account",
                    key: "account"
                },
                {
                    title: "昵称",
                    dataIndex: "nickname",
                    key: "nickname"

                }
            ],
            dataSource: [
                { account: "admin", nickname: "管理员" },
                { account: "jeecg", nickname: "JEECG用户" },
                { account: "qinfeng", nickname: "qinfeng" },
                { account: "test", nickname: "test" }
            ],
            selectedRowKeysArray: [],
            selectedRows: null
        }
    },
    methods: {
        handleCancel() {
            this.visible = false
            this.$emit("show")
        },

        onSelectChange(selectedRowKeys, selectedRows) {
            this.selectedRowKeysArray = selectedRowKeys;
            this.selectedRows = selectedRows;

        }
    }
}
</script>

<style>

</style>